<template>
  <div style="width:100%;overflow-x:hidden">
    <!-- <index-swiper></index-swiper>
    <all-goods></all-goods>
    <nav-service></nav-service> -->
    <div class="wrap-top-header-slider parallax">
            <!-- shape-one -->
            <div class="shape-image-one col-5 col-lg-3 col-xl-4 wow fadeIn" data-wow-delay="1s">
                <img src="images/background-shape/shape-1.png" class="img-fluid" alt="The Animated background shape Image">
            </div>
            <!--End shape-one -->
            <!-- start slider section -->
            <section class="padding trmain-slider">
                <div class="tr-slider-image col-xl-5 col-lg-6 col-sm-6 col-7 p-0 ">
                    <img src="images/silders/slider-image.png" class="img-fluid wow fadeIn" alt="the Girl on the beach - best destination Image" data-wow-delay="1s">
                </div>
                <div class="container trtop-baner-content">
                    <div class="row">
                        <div class="col-12 col-sm-11 col-md-9 col-lg-9 col-xl-10">
                            <div class="siider-content">
                                <p class="wow fadeInDown" data-wow-duration="1s" data-wow-delay=".3s">你的摄影终点在哪里?
                                </p>
                                <h1 class="wow fadeInDown" data-wow-duration="1.5s" data-wow-delay=".4s">此刻<br> 还是未来...</h1>
                                <form class="tr-slider-form wow fadeInUp" data-wow-duration="1.5s" data-wow-delay=".4s">
                                    <!-- <div class="form-group position-relative mb-0">
                                        <input type="email" class="form-control trform-control" placeholder="Find out the best place...">
                                        <button type="submit" class="btn btn-primary tr-form-button">Search</button>
                                    </div> -->
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
         <!-- start Experience Travel With Us -->
        <section class="padding position-relative margin-top parallax parallax-image-2">
            <!-- shape-two -->
            <div class="shape-image-two">
                <img src="images/background-shape/dottd-squre.png" class="img-fluid" alt="the background decorated dotted square image">
            </div>
            <!--End shape-two -->
            <div class="container" style="margin-bottom:30px;" v-for="item in imgList" :key="item.id">
                <!-- shape-three -->
                <div class="shape-image-three">
                    <img src="images/background-shape/shape-3.png" class="img-fluid" alt="the background shape square image">
                </div>
                <!--End shape-three -->
                <!-- HEADING TITLE -->
                <div class="trheading wow fadeInDown" data-wow-duration="2s" data-wow-delay=".4s">
                    <h2>{{item.name}}<br> 跟着我们一起</h2>
                </div>
                <!-- start image content -->
                <div class="row">
                    <div class="col-12 col-sm-6 col-lg-3" v-for="item1 in item.list" :key="item1.id">
                        <div class="trwith-image-block wow fadeInUp" data-wow-duration="1.5s" data-wow-delay=".4s">
                            <div class="tr-image-class">
                                <img :src="item1.imgUrl" class="img-fluid" alt="hiking in the blue hills reservation | Best hikes, Take a  hike">
                            </div>
                            <div class="tr-image-content time11">
                              <!-- <span>{{item1.createTime}}</span> -->
                              <span title="当前点赞数"><i class="el-icon-view" style="margin-right:5px;"></i>{{item1.clickNum}}</span>
                              <span title="点赞"><i @click="imgZan(item1)" :class="[ item1.clickNum ? 'el-icon-star-on' : 'el-icon-star-off']"></i></span>
                              <span title="收藏"><i class="el-icon-folder-add" @click="addCollect(item1)"></i></span>
                                <!-- <h3><a href="javascript:void(0);" class="tr-contentTitle">Blue hill trail</a></h3>
                                <p class="tr-contentDesc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- shape-four -->
            <div class="shape-image-four">
                <img src="images/background-shape/round-shape.png" class="img-fluid" alt="the background round shape | with Animation">
            </div>
            <!--End shape-four -->
        </section>

        <!-- start Adventure Trip -->
        <section class="padding position-relative parallax parallax-image-4">
            <!-- shape-seven -->
            <div class="shape-image-seven wow fadeInRight" data-wow-delay="1s" data-wow-duration="1.5s">
                <img src="images/background-shape/shape-6.png" class="img-fluid" alt="plan shape | for the background shape">
            </div>
            <!--End shape-seven -->
            <div class="container">
                <!-- HEADING TITLE -->
                <div class="trheading wow fadeInDown" data-wow-duration="2s" data-wow-delay=".4s">
                    <h2 class="mb-0">我们的<br> 理想摄影</h2>
                </div>
                <div class="row">
                    <div class="trsubHeading col-12 col-md-8 col-lg-6">
                        <p class="wow fadeIn mb-3 pb-md-0 pb-5" data-wow-duration="2s" data-wow-delay=".4s">
                          偶然得到第一部数 码相机开始 , 摄影便走进了我生活 , 成为我生命中很重要的 一部分。
                          第一次照相,就拿上相机不停的照,喜欢享受这种感觉...
                        </p>
                    </div>
                </div>

                <div class="position-relative wow fadeIn" data-wow-duration="2s" data-wow-delay=".4s">
                    <!-- start image content -->
                    <div class="slider Trip-slider">
                        <div class="trTripItem" v-for="item in imgList" :key="item.id">
                            <div class="trTripContent-image" :style="'background: url(' + item.list[0].imgUrl +') no-repeat; background-size: cover;'">
                               
                            </div>
                        </div>
                    </div>
                </div>
                <!-- shape-eight -->
                <div class="shape-image-eight">
                    <img src="images/background-shape/shape-8.png" class="img-fluid" alt="Dotted shape | background shape image for the page decoration">
                </div>
                <!--End shape-eight -->
            </div>
        </section>
        <!-- start Testimonials-->
        <section class="padding">
            <div class="container">
                <div class="trheading wow fadeInDown" data-wow-duration="2s" data-wow-delay=".4s">
                    <h2 class="mb-0">我心中的<br>摄影</h2>
                </div>
                <div class="trsubHeading mb-0">
                    <p class="wow fadeIn mb-0" data-wow-duration="2s" data-wow-delay=".4s">
                      摄影是一门随着传统摄影技术的形成和发展而产生的摄影应用科学，它以摄影光学、摄影化学和电子技术为基础，在长期实践中形成了独特的拍摄体系...
                    </p>
                </div>
            </div>
        </section>
        <span class="scroll-top" data-scroll="up"></span>
    <i class="fas fa-long-arrow-alt-up"></i>
  </div>
</template>

<script>
import NavService from "components/navfooter/NavService";
import IndexSwiper from "./IndexSwiper";
import IndexAds from "./indexAds";
import AllGoods from "./allGoods";
import { mapState } from 'vuex';
export default {  
  name: "index",
  components: {
    NavService,
    IndexSwiper,
    IndexAds, 
    AllGoods,
  },
  data () {
    return {
      daityQuery: {
        typeId: '',
        pageNum: 1,
        pageSize: -1
      },
      imgList: [],
      sildeList: [],
      pageQuery: {
        pageNum: 1,
        pageSize: 4
      },
    }
  },
  computed: {
    ...mapState(['user'])
  },
  mounted() {
    // this.getNavBanner();
    this.getType()
  },
  methods: {
    /**
     * 点赞
     */
    imgZan (item) {
        let params = {
          id: item.id
        }
        this.$api.daity.goodPhoto(params).then(res => {
          if (res.code === 200) {
            this.$message.success('点赞成功')
            this.imgList.map(item => {
              if (item.id == id) {
                this.$set(item, 'clickNum', 1)
              }
            })
          }
        })
    },
    /**
     * 收藏
     */
    addCollect (item) {
      if (!item.isCollect) {
        let params = {
          userId: this.user.id,
          imgUrl: item.imgUrl,
          img_share_id: item.id
        }
        this.$api.daity.addCollect(params).then(res => {
          if (res.code === 200) {
            this.$message.success('收藏成功')
            this.getDaityList()
          }
        })
      } else {
        this.$message.warning('不要重复收藏喔')
      }
    },
    /**
     * 获取图片分类列表
     */
    getType() {
      this.$api.daity.photoTypeList(this.pageQuery).then(res => {
        if (res.code === 200) {
          res.data.records.forEach(item => {
            this.getDaityList(item)
          })
        }
      })
    },
    /**
     * 获取图片列表
     */
    getDaityList (item) {
      this.daityQuery.typeId = item.id
      this.$api.daity.getPhotoList(this.daityQuery).then(res => {
        if (res.code === 200) {
          if (res.data.records.length > 0) {
            this.imgList.push({
              id: item.id,
              name: item.typeName,
              list: res.data.records
            })
          }
        }
      })
    },
    /**
     * 获取顶部banner列表
     */
    getNavBanner () {
      this.$api.daity.getPhotoList(this.pageQuery).then(res => {
        if (res.code === 200) {
          this.sildeList = res.data.records
        }
      })
    }
  },
};
</script>
<style scoped>
.time11{
        color: #d9d9d9;
        margin-top: 20px;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        
      }
.time11  i {
          color: #d9d9d9;
          cursor: pointer;
          margin-left: 20px;
        }
</style>
